<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">

            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
                :delFunc="handleDelete" :changePage="changePage" :editFunc="handleEdit">

                <template #type="{ rows }">
                    <el-tag>{{ rows.type==1?'购买会员':(rows.type==2?'购买星星':'能量租赁') }}</el-tag>
                </template>
                <template #pay_status="{ rows }">
                    <el-tag type="success" v-if="rows.pay_status==1"> {{'已支付'}}</el-tag>
                    <el-tag type="warning" v-else>{{ '未支付' }}</el-tag>
                </template>
                <template #is_refund="{ rows }">
                    <el-tag type="danger">{{ rows.is_refund==1?'已退款':'未退款' }}</el-tag>
                </template>
                <template #status="{ rows }">
                    <el-tag type="info">{{
                        rows.status==='waiting'?'等待':rows.status==='ongoing'?'进行':rows.status==='finish'?'完成':'失败'
                        }}</el-tag>
                </template>
                <template #paytime="{rows}">
                    <span v-if="rows.paytime">{{ dayjs(rows.paytime*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
                <template #finishtime="{rows}">
                    <span v-if="rows.finishtime">{{ dayjs(rows.finishtime*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
                <template #refundtime="{rows}">
                    <span v-if="rows.refundtime">{{ dayjs(rows.refundtime*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
                <template #createtime="{rows}">
                    <span v-if="rows.createtime">{{ dayjs(rows.createtime*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
                <template #updatetime="{rows}">
                    <span v-if="rows.updatetime">{{ dayjs(rows.updatetime*1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </TableCustom>
        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
        </el-dialog>
        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
            <TableDetail :data="viewData">
                <template #status="{ rows }">
                    <el-tag type="success" v-if="rows.status">启用</el-tag>
                    <el-tag type="danger" v-else>禁用</el-tag>
                </template>
            </TableDetail>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import { Role } from '@/types/role';
    import { agentStarOrderList } from '@/api';
    import TableCustom from '@/components/table-custom.vue';
    import TableDetail from '@/components/table-detail.vue';
    import { CirclePlusFilled } from '@element-plus/icons-vue';
    import { FormOption, FormOptionList } from '@/types/form-option';
    import dayjs from 'dayjs';
    // 查询相关
    const query = reactive({
        no: '',
        bot_id_str: '',
        tg_chatid: '',
        type: ''
    });
    const searchOpt = ref < FormOptionList[] > ([
        { type: 'input', label: '订单编号', prop: 'no' },
        { type: 'input', label: '机器ID', prop: 'bot_id_str' },
        { type: 'input', label: '用户ID', prop: 'tg_chatid' },
        {
            type: 'select', label: '商品分类', prop: 'type', opts: [
                { label: '会员', value: 1 },
                { label: '星星', value: 2 },
                { label: '能量租赁', value: 3 }
            ]
        }

    ])
    const handleSearch = () => {

        page.no = query.no
        page.tg_chatid = query.tg_chatid;
        page.bot_id_str = query.bot_id_str;
        page.type = query.type;

        changePage(1);
    };
    let sale = ref({
        price: '',
        sale_price: '',
        goods_id: ''
    })
    // 表格相关
    let columns = ref([
        { type: 'index', label: '序号', width: 55, align: 'center' },
        { prop: 'type', label: '类型', width: 100 },
        { prop: 'no', label: '订单编号', width: 140 },
        { prop: 'bot_id_str', label: '机器人ID' },
        { prop: 'tg_chatid', label: '用户ID' },
        { prop: 'tg_username', label: '用户名' },
        { prop: 'goods_id', label: '商品ID' },
        { prop: 'goods_title', label: '商品名称' },
        { prop: 'num', label: '购买数量' },
        { prop: 'cost_price', label: '成本价/个' },
        { prop: 'sum_cost_price', label: '总成本价' },
        { prop: 'sale_price', label: '销售价/个' },
        { prop: 'sum_sale_price', label: '总销售价' },
        { prop: 'profit', label: '利润' },
        { prop: 'pay_status', label: '支付状态', width: 90 },
        { prop: 'status', label: '状态' },
        { prop: 'out_id', label: '外部ID' },
        { prop: 'error_msg', label: '错误信息', width: 130 },
        { prop: 'is_refund', label: '退款状态', width: 90 },
        { prop: 'paytime', label: '支付时间', width: 160 },
        { prop: 'finishtime', label: '完成时间', width: 160 },
        { prop: 'refundtime', label: '退款时间', width: 160 },
        { prop: 'createtime', label: '创建时间', width: 160 },
        { prop: 'updatetime', label: '更新时间', width: 160 },
    ])
    const page = reactive({
        page: 1,
        limit: 10,
        total: 0,
        no: undefined,
        tg_chatid: undefined,
        bot_id_str: undefined,
        type: undefined

    })
    const tableData = ref < Role[] > ([]);
    const getData = async () => {

        const res = await agentStarOrderList(page)
        tableData.value = res.data.data;
        page.total = res.data.total
    };
    getData();
    const changePage = (val: number) => {
        page.page = val;
        getData();
    };

    // 新增/编辑弹窗相关
    const options = ref < FormOption > ({
        labelWidth: '100px',
        span: 24,
        list: [
            { type: 'input', label: '角色名称', prop: 'name', required: true },
            { type: 'input', label: '角色标识', prop: 'key', required: true },
            { type: 'switch', label: '状态', prop: 'status', required: false, activeText: '启用', inactiveText: '禁用' },
        ]
    })
    const visible = ref(false);

    const isEdit = ref(false);
    const rowData = ref({});
    const handleEdit = (row: Role) => {
        rowData.value = { ...row };
        isEdit.value = true;
        visible.value = true;
    };
    const updateData = () => {
        closeDialog();
        getData();
    };
    const closeDialog = () => {
        visible.value = false;
        isEdit.value = false;
        rowData.value = {};
    };

    // 查看详情弹窗相关
    const visible1 = ref(false);
    const viewData = ref({
        row: {},
        list: [],
        column: 1
    });
    const handleView = (row: Role) => {
        viewData.value.row = { ...row }
        viewData.value.list = [
            {
                prop: 'id',
                label: '角色ID',
            },
            {
                prop: 'name',
                label: '角色名称',
            },
            {
                prop: 'key',
                label: '角色标识',
            },
            {
                prop: 'status',
                label: '角色状态',
            },
        ]
        visible1.value = true;
    };

    // 删除相关
    const handleDelete = (row: Role) => {
        ElMessage.success('删除成功');
    }


    // 权限管理弹窗相关
    const visible2 = ref(false);
    const permissOptions = ref({})
    const handlePermission = (row: Role) => {
        visible2.value = true;
        permissOptions.value = {
            id: row.id,
            permiss: row.permiss
        };
    }

</script>

<style scoped>
    .salePrice {
        margin: 12px;

    }
</style>